<template>
  <div>
    <div class="wrapper" >
      <div class="formdata">
        <van-cell-group>
          <van-field class="textinput" type="text" label="姓名" input-align="right" clearable v-model="formdata.username" placeholder="请输入联系人姓名" />
          <van-field class="textinput" type="text" label="手机" input-align="right" clearable v-model="formdata.mobile" placeholder="请输入手机号码" />
          <van-field class="textinput" type="text" label="推荐码" input-align="right" clearable v-model="formdata.fatherCode" placeholder="请输入推荐码" />
          <van-field class="textinput" type="textarea" clearable v-model="formdata.introduce" placeholder="请填写个人经历" />
          <div class="textinput">
            <div class="box">
              <p>请上传一张个人形象</p>
              <div class="imgbox needsclick" >
                <img class="needsclick" style="width: 100px;height: 100px; object-fit:cover;" @click="upLoadImg" :src="formdata.photoUrl || require('@/assets/images/hailang/morentu@2x.png')" alt="">
              </div>
            </div>
          </div>
        </van-cell-group>
      </div>
      <qiniu ref="uploadFiles" class="needsclick" @selectFinish="getUploadImg"></qiniu>
      <div class="m_button" @click="submit">
        <div class="c_button">
          提交
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qiniu from '@/components/qiniu/qiniu'
import { mineApi } from '@/api'
import { parseTime } from '@/utils'
import { mapGetters } from 'vuex'
export default {
  components: {
    qiniu
  },
  async created() {
    console.log('this.user', this.user)
    if (!this.token || !this.user.mobile) {
      this.$router.push('/login?type=bind')
    }
    const res = await mineApi.visitList({
      pageNo: 1,
      pageSize: 20
    })
    if (res.code !== 200) {
      return
    }
    this.columns = res.data.records.map(item => {
      return {
        text: item.buyerName,
        ...item
      }
    })
    console.log('this.columns', this.columns)
  },
  computed: {
    ...mapGetters([
      'token',
      'user'
    ])
  },
  data() {
    return {
      showPicker: false,
      showPicker2: false,
      memberList: [],
      columns: [],
      nowTime: new Date(),
      formdata: {
        fatherCode: '',
        introduce: '',
        mobile: '',
        photoUrl: '',
        username: ''
      }
    }
  },
  methods: {
    onConfirm(value) {
      this.formdata.reportId = value.reportId
      this.formdata.buyerName = value.buyerName
      this.showPicker = false
    },
    onDateConfirm(value) {
      this.formdata.visitTime = parseTime(value)
      this.showPicker2 = false
    },
    upLoadImg() {
      this.$refs.uploadFiles.museClick()
    },
    getUploadImg(url, file) {
      console.log('url', url)
      // this.fileList.push(url)
      this.formdata.photoUrl = url
    },
    getSexValue(code) {
      let sexcode = 0
      switch (code) {
        case '男':
          sexcode = 1
          break
        case '女':
          sexcode = 2
          break
        default:
          break
      }
      return sexcode
    },
    async submit() {
      if (!this.formdata.username) {
        this.$toast('请输入姓名')
        return
      }
      if (!this.formdata.mobile) {
        this.$toast('请输入手机号')
        return
      }
      if (!this.formdata.fatherCode) {
        this.$toast('请输入推荐码')
        return
      }
      const res = await mineApi.addApply(this.formdata).catch(err => {
        console.log('err', err)
        this.$toast('服务器出错')
      })
      if (res.code !== 200) {
        return
      }
      this.$toast('提交成功')
      setTimeout(() => {
        this.$store.dispatch('GetUserInfo')
        this.$router.back()
      }, 500)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
@import "src/assets/css/mixin.scss";
@import 'src/assets/css/variables.scss';
  .wrapper {
    .formdata{
      padding: 20px;
      background-color: #fff;
    }
    .textinput{
      border-radius: 10px;
      margin: 20px 0;
      line-height: 24px;
      background-color: #f0f0f0;
      .box{
        p{
          font-size: 14px;
          margin: 5px 0;
        }
        padding: 10px 20px;
      }
    }
  }
</style>
